<template>
  <div class="search">
      <van-search  show-action placeholder="请输入商品搜索关键词" @cancel="cancelSearch" v-model="keyword" @search="impEnter"  @input="tipsHandler" ref="se" autofocus/>
      <History :history="history" :hotList="hotList" v-if="!keyword && !showList" @historyKeyword="historyKeyword" @clearHistory="clearHistory"></History>
      <Tips v-else-if="showList ==1" :tipsList="inpRes" @acceptKeyword="receiveKeyword" />
      <SortList :inpRes="inpRes" :resCate="resCate" v-else-if="showList ==2"  @priceSort="acceptPriceSort" @categorySort="acceptCategory"></SortList>
  </div>
</template>

<script>
import Tips from '@/components/searchTips'
import SortList from '@/components/sortGoodsList'
import History from '@/components/history'
import {mapState} from 'vuex';
export default {
    components:{
        History,
        SortList,
        Tips
    },
    data(){
        return{
            keyword:'',
            history:[],
            hotList:[],
            // 0为history页面
            // 1 tips
            // 2 sort
            showList:0,
            // 搜索输入框返回值
            inpRes:[],
            // 搜索输入框返回值 不同分类
            resCate:[],
            // 需要查找的分类ID
            categoryId:'',
            // 价格排序            
            orderBy:'',
        }
    },
    methods:{
        cancelSearch(){
            this.$router.back(-1)
        },
        // 从ID获取数据
        async SearchData(){
            let res = await this.$api.search.reqHistory({params:{id:this.id}})
            if(res.status != 200){
               return this.$msg.fail('网络请求错误!') 
            }
            this.history = res.history
            this.hotList = res.hotList
        },

        // 搜索的回车事件
        impEnter(){
            this.$api.search.saveHistory({id:this.id,keyword:this.keyword})
            this.SearchData()
            this.impSearch()
            this.showList = 2
        },

        // 请求数据
       async impSearch(){
            
            if(this.keyword.trim().length == 0){
                return this.keyword = ''
            }
            let res = await this.$api.search.reqKeyword({keyword:this.keyword,category:this.categoryId,order:this.orderBy})
            this.inpRes = res.data

            this.resCate = res.cagtegoryList
        },

        // 接收子组件价格排序
        acceptPriceSort(sort){
            this.orderBy = sort
            this.impSearch()
        },

        // 接收子组件分类排序
        acceptCategory(categoryId){
            this.categoryId =categoryId
            this.impSearch()
        },

        // 还原数据
        inition(){
            let init = {
            // 搜索输入框返回值
            inpRes:[],
            // 搜索输入框返回值 不同分类
            resCate:[],
            // 需要查找的分类ID
            categoryId:'',
            // 价格排序            
            orderBy:'',                            
            }
            Object.assign(this.$data,init)
        },

        // 点击History
        historyKeyword(keyword){
            this.inition()
            this.showList = 2
            this.keyword = keyword
            this.$api.search.saveHistory({id:this.id,keyword:this.keyword})
            this.SearchData()
            this.impSearch()
        },

        // 只要关键子改变
       async tipsHandler(){
           this.inition()
           if(this.keyword.trim().length == 0){
               this.keyword = ''
               this.showList = 0
               return
           }
           this.showList = 1
            this.impSearch()


        },

        // 从tips中接收到的
        receiveKeyword(keyword){
            this.inition()
            this.keyword = keyword
            this.$api.search.saveHistory({id:this.id,keyword:this.keyword})
            this.SearchData()
            this.impSearch()
            this.showList = 2
        },

        // clearHistory
        async clearHistory(){
            await this.$api.search.reqClearHistory({id:this.id})
            this.SearchData()
        }
        

    },
    computed:{
        ...mapState({
            id:(state)=>state.user.id
        }),

    },
    mounted(){
       this.SearchData()
    }

}
</script>

<style lang="less" scoped>
.search{
    box-sizing: border-box;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color:var(--bg);

}

</style>